<template>
  <div>
    <h2>账号运营</h2>
    <el-row>
      <el-col :span="8">
        <div class="grid-content bg-purple">用户注册总数</div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light">用户新增数</div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light">用户活跃数</div>
      </el-col>
    </el-row>
    <div id="myChart" :style="{width: '100%', height: '300px'}"></div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1520],
            type: "line"
          }
        ]
      });
    }
  }
};
</script>

<style lang="sass" scoped>

</style>